<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Title</title>

    <!--=====================================================================-->
    <script>
        //通过dom来添加li标签

        //目标,点击btn,创建ul下的li,并添加input中的文字到其中
        window.onload = function () {
            //先获取元素
            let oBtn1 = document.getElementById('btn1');
            let oUl1 = document.getElementById('ul1');
            let oTxt = document.getElementById('txt1');

            //为btn添加点击事件
            oBtn1.onclick = function () {

                // 创建li元素
                // 通过createElement来创建元素,此时会寄存在内存中,不会在页面显示
                // 但注意,此li与getEleByXxx获取的li是完全一样的!
                let oLi = document.createElement('li');

                oLi.innerText = oTxt.value;     //设置li中的内容

                //让父节点添加子节点来显示该元素
                oUl1.appendChild(oLi);
                oTxt.value = '';                //清空txt
            }
        }



    </script>
</head>

<body>

<div>
    <input type="text" placeholder="..." id="txt1">
    <input type="button" value="add" id="btn1">
    <ul id="ul1"></ul>

</div>

</body>
</html>